<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>分类</title>
			<link rel="icon" type="image/png" href="http://m.lppz.com/images/favicon.png">
		
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../lib/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/home.css" />
		<style type="text/css">
			html,body{
				font-family: Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;
				color: #999999;
			}
			body{
				min-width: 320px;
			}
			.posi-re{
				position: relative;
			}
			.categoryRoll {
				width: 100px;
				line-height: 42px;
				position: relative;
				z-index: 200;
			}
			.categoryRoll li {
				padding: 0;
				border-bottom: 1px solid #DDDDDD;
				background-color: #EEEEEE;
				cursor: pointer;
			}
			.categoryRoll li a{
				color: #333333;
				font-size: 13px;
			}
			.categoryRoll .weui_bar_item_on{
				color: #666666;
				background-color: #FFFFFF;
			}
			.sub_nav{
				position: absolute;
				padding-left: 125px;
				padding-right: 10px;
				width: 100%;
				top: 0;
				left: 0;
				box-sizing: border-box;
				display: none;
				z-index: 100;
			}
			.sub_nav_list li{
				text-align: left;
				line-height: 42px;
				padding: 0;
				border-bottom: 1px solid #DDDDDD;
				text-indent: 10px;
			}
			.sub_nav_list li a{
				color: #353535;
				font-size: 13px;
			}
			.sub_nav_list li i{
				float: right;
				font-size: 30px;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<div class="weui_tab">
			<div class="header" id="top">
				<div class="header_logo"></div>
				<div class="weui_search_bar" id="search_bar">
					<form class="weui_search_outer">
						<div class="weui_search_inner">
							<i class="weui_icon_search"></i>
							<input type="search" class="weui_search_input" id="search_input" />
							<a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
						</div>
						<label for="search_input" class="weui_search_text" id="search_text">
      						<i class="weui_icon_search"></i>
      						<span></span>
    					</label>
					</form>
				</div>
			</div>
			<div class="weui_tab_bd posi-re">
				<div class="categoryRoll">
					<li class="weui_navbar_item weui_bar_item_on">
						<a href="#">坚果炒货</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">肉铺鱼干</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">果干果脯</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">糕点糖果</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">素食山珍</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">花茶饮品</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">进口食品</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">精选礼盒</a>
					</li>
					<li class="weui_navbar_item">
						<a href="#">当季热销</a>
					</li>
				</div>
				<!--坚果炒货-->
				<div class="sub_nav" style="display: block;">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">嗑壳坚果</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">果果仁仁</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">特惠炒货</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--肉铺鱼干-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">牛肉系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">鸡鸭鱼</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">鸡鸭系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">跨年狂欢</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">海味零食</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">猪肉系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--果干果脯-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">蜜饯系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">红枣葡萄</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">跨年狂欢</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">话梅山楂</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">缤纷果干</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">缤纷果干</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--高点糖果-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">跨年狂欢</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">糖果系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">果冻系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">饼干</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">饼干系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">糕点系列</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--素食山珍-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">其他山珍</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">美味豆干</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">笋菌海带</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">跨年狂欢</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--花茶饮品-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">清香花茶</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">牛奶</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">进口饮料</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--进口食品-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">韩国</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">进口糕点</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">跨年狂欢</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">马来西亚</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">休闲零食</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">进口糖果</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">菲律宾</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">特价区</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">泰国</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">	
							<a href="#">港澳台</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--精选礼盒-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">零食礼盒</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">个性套餐</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">糕点礼盒</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
				<!--当季热销-->
				<div class="sub_nav">
					<div class="sub_nav_list">
						<li class="weui_navbar_item">
							<a href="#">畅销组合</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
						<li class="weui_navbar_item">
							<a href="#">新品尝鲜</a>
							<i class="iconfont">&#xe6d7;</i>
						</li>
					</div>
				</div>
			</div>
		</div>
		<div class="weui_tabbar">
			<a href="../index.html" class="weui_tabbar_item weui_bar_item_on">
				<div class="weui_tabbar_icon">
					<i class="iconfont">&#xe625;</i>
				</div>
				<p class="weui_tabbar_label">首页</p>
			</a>
			<a href="#tab2" class="weui_tabbar_item fenlei">
				<div class="weui_tabbar_icon">
					<i class="iconfont">&#xe681;</i>
				</div>
				<p class="weui_tabbar_label">分类</p>
				<div class="bottom_menu">
					<li href="#">坚果炒货</li>
					<li href="#">肉铺鱼干</li>
					<li href="#">糕点糖果</li>
					<li href="#">素食山珍</li>
					<li href="#">花菜饮品</li>
					<li href="#">进口食品</li>
					<li href="#">精选礼盒</li>
					<li href="#">当季热销</li>
					<li href="#">全部分类</li>
				</div>
			</a>
			<a href="../cart/cart.html" class="weui_tabbar_item">
				<div class="weui_tabbar_icon">
					<i class="iconfont">&#xe670;</i>
				</div>
				<p class="weui_tabbar_label">购物车</p>
			</a>
			<a href="javascript:;" class="weui_tabbar_item">
				<div class="weui_tabbar_icon">
					<i class="iconfont">&#xe60d;</i>
				</div>
				<p class="weui_tabbar_label">我的良品</p>
			</a>
		</div>
		<script src="../lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".weui_tabbar_item:nth-child(2)").click(function() {
					$(".bottom_menu").slideToggle("slow");
				})
			$(function(){
				$(".weui_tabbar_item:nth-child(4)").click(function(){
					if(localStorage.user){
						window.location.href = "../personal/personal.html";
					}else{
						window.location.href = "../login/login.html";
					}
				})
				$(".categoryRoll .weui_navbar_item").click(function(){
					$(".categoryRoll .weui_navbar_item").removeClass("weui_bar_item_on");
					$(this).addClass("weui_bar_item_on");
					$(".sub_nav").hide();
					$(".sub_nav").eq($(this).index()).show();;
				})
			})
		</script>
	</body>

</html>